<template>
	<div style="width: 100%">
		<div v-for="(item, i) in FieldItem?.attrs.inputList" :key="i" style="margin-bottom: 10px">
			<el-input v-model="item.value" style="width: 95%; marigin-right: 10px" @input="autoAddInputFn">
				<template v-slot:prepend>
					<span :style="{ width: FieldItem?.attrs.indexWidth + 'px' }" style="display: inline-block">
						{{ item.label }}
					</span>
				</template>
			</el-input>
			<el-icon style="color: red; cursor: pointer; margin-left: 10px" @click="delInputItem(i)">
				<Delete />
			</el-icon>
		</div>
		<el-button type="text" icon="plus" @click="addInputItem">
			{{ FieldItem?.attrs.addButtonText }}
		</el-button>
	</div>
</template>

<script lang="ts" setup>
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';

const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		FieldItem: TabFieldType | null;
	}>(),
	{
		FieldItem: null,
	}
);
const { FieldItem, pageData } = toRefs(props);

onMounted(() => {
	init();
});

const init = () => {
	if (pageData!.value![FieldItem.value!.attrs.arrayBind]) {
		const list: { label: any; value: any }[] = [];
		pageData!.value![FieldItem.value!.attrs.arrayBind].split('|').forEach((item: Record<string, any>) => {
			list.push({ label: item.split('=')[0], value: item.split('=')[1] });
		});
		FieldItem.value!.attrs.inputList = list;
	}
};

const autoAddInputFn = () => {
	pageData!.value![FieldItem.value!.attrs.arrayBind] = '';
	FieldItem.value?.attrs.inputList.forEach((item: Record<string, any>, index: number) => {
		if (!pageData!.value![FieldItem.value?.attrs.arrayBind]) {
			pageData!.value![FieldItem.value?.attrs.arrayBind] = item.label + '=' + item.value + '|';
		} else if (pageData!.value![FieldItem.value?.attrs.arrayBind] && index < FieldItem.value?.attrs.inputList.length - 1) {
			pageData!.value![FieldItem.value?.attrs.arrayBind] += item.label + '=' + item.value + '|';
		} else {
			pageData!.value![FieldItem.value?.attrs.arrayBind] += item.label + '=' + item.value;
		}
	});
};

const delInputItem = (i: number) => {
	FieldItem.value!.attrs.inputList.splice(i, 1);
	FieldItem.value!.attrs.inputList.forEach((item: Record<string, any>, j: number) => {
		var option = String.fromCharCode('A'.charCodeAt(0) + j);
		item.label = option;
	});
	autoAddInputFn();
};

const addInputItem = () => {
	var option = String.fromCharCode('A'.charCodeAt(0) + FieldItem.value?.attrs.inputList.length);
	FieldItem.value?.attrs.inputList.push({ label: option, value: '' });
};
</script>

<style lang="scss" scoped></style>
